<!--
 * @Author: cgl
 * @Date: 2023-04-18 15:12:26
 * @LastEditors: cgl
 * @LastEditTime: 2023-09-04 15:31:58
 * @FilePath: \public-health-emergencies-fed:\新放射\新radiation-hygiene-fe\src\views\person\equipmentType.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <div class="app-container">
    <el-form
      class="searchform"
      :model="queryParams"
      ref="queryParams"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="大类" label-width="50px">
            <el-select
              v-model="queryParams.largeCategory"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in dict.type.large_category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-wrapper">
      <el-table v-loading="loading" :data="dataList">
        <el-table-column label="序号" type="index" align="center" width="50">
          <template slot-scope="scope">
            <div style="text-align: center;">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="设备类型"
          align="center"
          prop="name"
          width="200"
        />
        <el-table-column label="检测项目" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.map">
              <span
                v-for="(value, key, index) in scope.row.map"
                :key="key"
                @click="viewOutTable(key, value)"
                class="viewfile"
              >
                {{ value }}
                <span
                  v-if="index != Object.keys(scope.row.map).length - 1 && value"
                >
                  、
                </span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="检测依据" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.standardIdList.length != 0">
              <div
                v-for="(item, index) in scope.row.standardIdList"
                :key="index"
              >
                <span @click="viewFile(item.standardOssId)" class="viewfile">
                  {{ item.standardName }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评价依据" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.evaluateStandardIdList.length != 0">
              <div
                v-for="(item, index) in scope.row.evaluateStandardIdList"
                :key="index"
              >
                <span @click="viewFile(item.standardOssId)" class="viewfile">
                  {{ item.standardName }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备大类" align="center" width="120">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.large_category"
              :value="scope.row.largeCategory"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-button @click.native.prevent="openDialog(row)" type="text">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 修改弹框 -->
    <el-dialog
      width="1000px"
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      v-dialogDrag="true"
      @closed="
        () => {
          instrumentTypeSelect.forEach((item) => (item.certificates = []));
          $refs.instrumentTypeTable.clearSelection();
          instrumentTypeSelection = [];
          currInstrumentTypeRow = {};
          certificateTypeSelect = [];
        }
      "
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="80px"
      >
        <el-row>
          <el-col style="position: relative; z-index: 9999" :span="24">
            <el-form-item label="排序">
              <el-input-number
                v-model="form.sort"
                placeholder="请输入排序"
                :precision="0"
                controls-position="right"
                style="width: 300px"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检测标准">
              <el-select
                v-model="form.standardIdList"
                placeholder="输入文字检索查询"
                multiple
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in inspectionStandardSelect"
                  :key="item.standardId"
                  :label="item.standardName"
                  :value="item.standardId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="评价标准">
              <el-select
                v-model="form.evaluateStandardIdList"
                placeholder="输入文字检索查询"
                multiple
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in inspectionStandardSelect"
                  :key="item.standardId"
                  :label="item.standardName"
                  :value="item.standardId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
						<el-form-item label="仪器类型">
							<el-select
								v-model="form.instrumentTypeList"
								placeholder="输入文字检索查询"
								multiple
								filterable
								@change="changeInstrumentTypeId"
								ref="entrustEquipmentTypeId"
								style="width: 100%">
								<el-option
									v-for="item in instrumentTypeSelect"
									:key="item.key"
									:label="item.key"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
          <el-row :gutter="10">
            <el-col :span="12">
              <div style="margin-bottom: 5px; font-weight: bold">仪器类型</div>
              <el-table
                ref="instrumentTypeTable"
                :data="instrumentTypeSelect"
                @row-click="handleInstrumentTypeRowClick"
                @selection-change="handleInstrumentTypeSelectionChange"
              >
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column
                  label="仪器类型"
                  align="center"
                  min-width="200"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.key }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="排序" align="center" min-width="100">
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.sort"
                      placeholder=""
                      :precision="0"
                      :controls="false"
                      controls-position="right"
                      style="width: 100%"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <div style="margin-bottom: 5px; font-weight: bold">
                <span>证书类型(</span>
                <span>{{ currInstrumentTypeRow.key || "无" }})</span>
              </div>
              <el-table
                ref="certificateTypeTable"
                :data="certificateTypeSelect"
                @row-click="handleCertificateTypeRowClick"
                @select="handleCertificateTypeSelect"
                @select-all="handleCertificateTypeSelectAll"
              >
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column
                  label="证书类型"
                  align="center"
                  min-width="200"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.certificateType }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看检测项目弹框 -->
    <el-dialog
      :title="outTitle"
      :visible.sync="testitemVisible"
      :close-on-click-modal="false"
      width="1000px"
      class="testitemdialog"
      v-dialogDrag="true"
    >
      <itemIndex :type="type"></itemIndex>
      <div slot="footer">
        <el-button @click="testitemVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  entrustEquipmentTypeList,
  entrustEquipmentTypeExport,
  entrustEquipmentTypeListing,
  entrustEquipmentTypeDetail,
  entrustEquipmentTypeAdd,
  entrustEquipmentTypeEdit,
  entrustEquipmentTypeDelete,
  testQualityControl,
  equipmentTypeListing,
} from "@/api/person/entrustEquipmentType";
import { instrumentTypeListing } from "@/api/resourse/equipmentType";
import { inspectionStandardListing } from "@/api/basicData/inspectionStandard";
import { listOss, listByIds, delOss } from "@/api/system/oss";
import { getListByInspectionTypeCode } from "@/api/resourse/certificateType";
import itemIndex from "./itemControl/index";

export default {
  name: "User",
  dicts: ["large_category"],
  components: { itemIndex },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
      rules: {},
      // 视图高度
      height: document.documentElement.clientHeight,
      // 设备类型列表
      dataList: [],
      // 表单参数
      form: {},
      loading: false,
      status: null,
      title: null,
      // 检测项目
      testitemVisible: false,
      testitemList: [],
      // 检测标准
      standardVisible: false,
      standardList: [],
      liter: null,
      format: null,
      // 大表类型
      type: null,
      // 大表名称
      outTitle: null,
      // 检测标准下拉框
      inspectionStandardSelect: [],
      // 仪器类型下拉框
      instrumentTypeSelect: [],
      // 证书类型下拉框
      certificateTypeSelect: [],

      currInstrumentTypeRow: {},
      instrumentTypeSelection: [],
    };
  },
  created() {
    // 未发起栏的权限控制（领导层没有）
    let permissions = this.$store.getters.permissions;
    let found = permissions.find((item) => {
      return item == "task:tasksContract:apply";
    });
    this.isPer = found == "task:tasksContract:apply" || permissions == "*:*:*";
    if (this.isPer) {
      this.getInspectionStandardList();
      // 获取仪器类型下拉框
      this.getInstrumentTypeSelect();
    }
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      this.loading = true;
      entrustEquipmentTypeList(this.queryParams)
        .then((response) => {
          let dataList = response.rows || [];
          dataList.forEach((item) => {
            this.$set(item, "standardIdList", []);
            let arr = item.standardId ? item.standardId.split(",") : [];
            if (arr.length != 0) {
              arr.forEach((id) => {
                let findobj = this.inspectionStandardSelect.find(
                  (it) => it.standardId == id
                );
                if (findobj) {
                  item.standardIdList.push({
                    standardName: findobj.standardName,
                    standardOssId: findobj.standardOssId,
                  });
                }
              });
            }
          });
          dataList.forEach((item) => {
            this.$set(item, "evaluateStandardIdList", []);
            let arr = item.evaluateStandard
              ? item.evaluateStandard.split(",")
              : [];
            if (arr.length != 0) {
              arr.forEach((id) => {
                let findobj = this.inspectionStandardSelect.find(
                  (it) => it.standardId == id
                );
                if (findobj) {
                  item.evaluateStandardIdList.push({
                    standardName: findobj.standardName,
                    standardOssId: findobj.standardOssId,
                  });
                }
              });
            }
          });
          this.dataList = dataList;
          this.total = response.total;
          this.loading = false;
        })
        .catch((response) => {
          this.loading = false;
        });
    },
    // 获取检测标准下拉框
    getInspectionStandardList() {
      inspectionStandardListing({}).then((response) => {
        this.inspectionStandardSelect = response.data;
      });
    },
    // 获取仪器类型下拉框
    getInstrumentTypeSelect() {
      instrumentTypeListing().then((response) => {
        this.instrumentTypeSelect = response.data || [];
      });
    },
    // 更改仪器类型
    changeInstrumentTypeId(val) {
      this.$nextTick(() => {
        this.form.name = this.$refs.entrustEquipmentTypeId.selectedLabel;
      });
    },
    // 打开检测标准
    openDialog(row, status) {
      this.form = {
        standardIdList: [],
        evaluateStandardIdList: [],
        sort: null,
        instrumentTypeList: [],
      };
      this.resetForm("form");
      if (row) {
        entrustEquipmentTypeDetail(row.entrustEquipmentTypeId).then(
          (response) => {
            this.form = response.data;
            this.$set(
              this.form,
              "standardIdList",
              this.form.standardId ? this.form.standardId.split(",") : []
            );
            this.$set(
              this.form,
              "evaluateStandardIdList",
              this.form.evaluateStandard
                ? this.form.evaluateStandard.split(",")
                : []
            );
            this.$set(
              this.form,
              "instrumentTypeList",
              this.form.instrumentType
                ? this.form.instrumentType.split(",")
                : []
            );
            this.dialogVisible = true;
            this.$nextTick(() => {
              this.form.equipmentTypeCertificateTypes =
                this.form.equipmentTypeCertificateTypes || [];
              this.form.equipmentTypeCertificateTypes.forEach((item) => {
                const findRes = this.instrumentTypeSelect.find(
                  (row) => row.value == item.instrumentType
                );
                if (findRes) {
                  if (item.certificateTypeCode) {
                    findRes.certificates = item.certificateTypeCode
                      .split(",")
                      .map((code) => ({ certificateTypeCode: code }));
                  }
                  findRes.sort = item.sort;
                  this.instrumentTypeSelection.push(findRes);
                  this.$refs.instrumentTypeTable.toggleRowSelection(
                    findRes,
                    true
                  );
                }
              });
            });
          }
        );
        if (status == "3") {
        } else {
          this.status = "2";
          this.title = "修改设备类型";
        }
      }
    },
    // 点击仪器类型行时
    handleInstrumentTypeRowClick(row) {
      this.currInstrumentTypeRow = row;
      this.certificateTypeSelect = [];
      getListByInspectionTypeCode(row.value)
        .then((res) => {
          this.certificateTypeSelect = res.data || [];
          if (!this.currInstrumentTypeRow.certificates) return;
          this.$nextTick(() => {
            this.certificateTypeSelect.forEach((row2) => {
              const findRes = this.currInstrumentTypeRow.certificates.find(
                (item) => item.certificateTypeCode == row2.certificateTypeCode
              );
              if (findRes)
                this.$refs.certificateTypeTable.toggleRowSelection(row2);
            });
          });
        })
        .catch((err) => {});
    },
    // 选择的仪器类型改变时
    handleInstrumentTypeSelectionChange(selection) {
      this.instrumentTypeSelection = selection;
    },
    // 点击证书类型行时
    handleCertificateTypeRowClick(row) {
      this.$refs.certificateTypeTable.toggleRowSelection(row);
      if (!this.currInstrumentTypeRow.certificates) {
        this.currInstrumentTypeRow.certificates = [];
      }
      const findIndex = this.currInstrumentTypeRow.certificates.findIndex(
        (item) => item.certificateTypeCode == row.certificateTypeCode
      );
      if (findIndex > -1)
        this.currInstrumentTypeRow.certificates.splice(findIndex, 1);
      else this.currInstrumentTypeRow.certificates.push(row);
    },
    // 选择的证书类型改变时
    handleCertificateTypeSelect(selection, row) {
      this.currInstrumentTypeRow.certificates = selection;
    },
    handleCertificateTypeSelectAll(selection) {
      this.currInstrumentTypeRow.certificates = selection;
    },
    // 提交修改
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        if (this.status == "1") {
        } else if (this.status == "2") {
          this.form.standardId = this.form.standardIdList.join(",");
          this.form.evaluateStandard =
            this.form.evaluateStandardIdList.join(",");
          this.form.instrumentType = this.form.instrumentTypeList.join(",");
          let form = JSON.parse(JSON.stringify(this.form));
          delete form.standardIdList;
          delete form.evaluateStandardIdList;
          delete form.instrumentTypeList;
          form.equipmentTypeCertificateTypes = this.instrumentTypeSelection.map(
            (row) => ({
              sort: row.sort,
              instrumentType: row.value,
              certificateTypeCode:
                row.certificates
                  ?.map((item) => item.certificateTypeCode)
                  .join(",") || "",
            })
          );
          entrustEquipmentTypeEdit(form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.getList();
          });
        }
      });
    },
    // 查看大表
    viewOutTable(type, outTitle) {
      this.type = type;
      this.outTitle = outTitle;
      this.testitemVisible = true;
      this.$nextTick(() => {
        window.MathJax.Hub.Queue([
          "Typeset",
          window.MathJax.Hub,
          document.body,
        ]);
      });
    },
    // 列表文件预览
    viewFile(ossId) {
      if (ossId) {
        listByIds(ossId).then((response) => {
          window.open(response.data[0].url, "PDF", "");
        });
      } else {
        this.$modal.msgWarning("暂无文件");
      }
    },
    // 搜索重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.resetForm("queryParams");
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.viewfile {
  color: #2a72ee;
  cursor: pointer;
  display: inline-block;
  width: fit-content;
  &:hover {
    color: #2a72ee;
    text-decoration: underline;
  }
}
.testitemtable ::v-deep .el-table__header-wrapper .el-table__cell {
  text-align: center;
}
.custable {
  border-collapse: collapse;
  border-color: #7d7d7d;
  text-align: center;
  td {
    padding: 5px 20px;
  }
}
.standarddialog ::v-deep .el-dialog__body {
  padding-top: 20px;
  padding-bottom: 20px;
}
.testitemdialog ::v-deep .el-dialog__body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.istip {
  text-align: left;
  margin-left: 20px;
}
</style>
